import {
  Button,
  Cascader,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Radio,
  Select,
  Switch,
  TreeSelect,
  Card,
} from "antd";
import { useState, useEffect } from "react";
import "./CreateNewChatRoom.css";

function CreateNewChatRoom({ onClick }) {
  console.log("CreateNewChatRoom");
  const [componentSize, setComponentSize] = useState("default");
  const { Meta } = Card;

  const onFormLayoutChange = ({ size }) => {
    setComponentSize(size);
  };

  return (
    <>
      <div className="box">
        <div className="box-main">
          <Card
            style={{
              width: "40%",
            }}
            cover={
              <img
                alt="example"
                src="../../../static/images/createNewRoom.png"
              />
            }
          >
            <Meta title="创建房间" style={{ textAlign: "center" }} />
          </Card>
          <div>
            <Form
              wrapperCol={{
                span: 24,
              }}
              layout="horizontal"
              initialValues={{
                size: componentSize,
              }}
              onValuesChange={onFormLayoutChange}
              size={componentSize}
              style={{
                maxWidth: 1000,
              }}
            >
              <Form.Item label="房间名称">
                <Input />
              </Form.Item>
              <Form.Item label="房间类型">
                <Select>
                  <Select.Option value="demo">Demo</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item label="连接时长">
                <TreeSelect
                  treeData={[
                    {
                      title: "Light",
                      value: "light",
                      children: [
                        {
                          title: "Bamboo",
                          value: "bamboo",
                        },
                      ],
                    },
                  ]}
                />
              </Form.Item>
              <Form.Item label="是否私密" valuePropName="checked">
                <Switch />
              </Form.Item>
            </Form>
            <div className="box-footer">
              <Button size="large" key="cancel" onClick={onClick}>
                取消
              </Button>
              <Button size="large" type="primary" key="ok">
                确定
              </Button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default CreateNewChatRoom;
